<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const ids = ref('');
const title = ref('');
const defaultimg = ref('https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg')

onLoad((optision) => {
  ids.value = optision.id;
  title.value = optision.title;
  console.log('optision', optision)
})

const leftClick = () => {
  uni.navigateBack();
}
</script>
<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top-box">
      <fui-icon :size="48" name="arrowleft" @click="leftClick"></fui-icon>
      <view class="nav-top-sreach">
        <div style="margin: 0 10rpx 0 35rpx">
          <fui-icon :size="30" name="search"></fui-icon>
        </div>
        <text>课程名称</text>
      </view>
    </view>
  </fui-nav-bar>
  <view class="book-news">
    <view class="book-title">{{ title }}{{ title }}{{ title }}</view>
    <view class="author-box">
      <image class="author-image" :src="defaultimg" mode="scaleToFill" />
      <view class="author-time">
        <view class="time-author">博士家官方</view>
        <view class="time">2024-02-28 17：23</view>
      </view>
      <view class="concern-box">关注</view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.nav-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .nav-top-sreach {
    width: 582rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    color: #999999;

    text {
      font-size: 28rpx;
    }
  }
}

.book-news {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .book-title {
    margin: 30rpx;
    width: 670rpx;
    height: 100rpx;
    font-size: 36rpx;
    color: #424242;
    overflow: hidden;
    /* 隐藏溢出文本 */
    display: -webkit-box;
    /* 将元素视为弹性伸缩盒子 */
    -webkit-box-orient: vertical;
    /* 设置伸缩盒子的排列方向为垂直方向 */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* 显示的行数 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    white-space: normal;
    /* 默认值，允许文本换行 */
  }

  .author-box {
    margin: 30rpx;
    width: 100%;
    height: 74rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .author-image {
      width: 72rpx;
      height: 72rpx;
      border-radius: 99999rpx;
    }

    .author-time {
      width: 414rpx;
      height: 74rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .time-author {
        font-size: 28rpx;
        color: #424242;
      }

      .time {
        font-size: 24rpx;
        color: #A5A5A5;
      }
    }
  }

  .concern-box {
    width: 128rpx;
    height: 58rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
    background: #FF3333;
    color: #FFFFFF;
    font-size: 24rpx;
  }
}
</style>